<template>
  <div class="body">
    <div class="header">
      后台管理界面<el-button
        type="primary"
        @click="logout"
        style="
          float: right;
          margin-right: 40px;
          margin-top: 36px;
          font-size: 17px;
        "
        >退出登录</el-button
      >
    </div>
    <div class="search">
      <el-select v-model="select" style="width: 170px">
        <el-option
          v-for="item in options"
          :key="item.label"
          :value="item.label"
          :label="item.label"
        >
        </el-option>
      </el-select>
      <el-select v-model="subselect" style="width: 160px">
        <el-option
          v-for="item in catalog"
          :key="item.value"
          :value="item.value"
          :label="item.label"
        >
        </el-option>
      </el-select>
      <el-input
        class="s2"
        v-model="keyword"
        placeholder="搜索商品"
        prefix-icon="el-icon-search"
        style="width: 350px; margin-right: 10px"
        clearable
        @keydown.enter.native="search"
      ></el-input>
      <el-button icon="el-icon-search" type="primary" @click="search">
        搜索
      </el-button>
    </div>
    <div class="main">
      <div v-if="isSearchGood" style="height: 600px">
        <el-table
          :data="order"
          height="100%"
          border
          stripe
          style="width: 100%"
          :default-sort="{ prop: 'date', order: 'descending' }"
        >
          <el-table-column prop="goodid" sortable label="发布编号" fit>
          </el-table-column>
          <el-table-column prop="username" sortable label="发布用户" fit>
          </el-table-column>
          <el-table-column prop="name" sortable label="发布商品" fit>
          </el-table-column>
          <el-table-column prop="price" sortable label="价格" fit>
          </el-table-column>
          <el-table-column prop="num" sortable label="数量" fit>
          </el-table-column>
          <el-table-column prop="date" sortable label="发布时间" fit>
          </el-table-column>
          <el-table-column width="210"
            ><template slot="header"> </template
            ><template slot-scope="scope">
              <el-button
                @click="watchPublish(scope.row)"
                type="text"
                size="medium"
                >查看详情</el-button
              >
              <el-button
                @click="editPublish(scope.row)"
                type="text"
                size="medium"
                >修改</el-button
              >
              <el-button
                @click="deletePublish(scope.row)"
                type="text"
                size="medium"
                >删除</el-button
              >
            </template></el-table-column
          >
        </el-table>
      </div>
      <div v-if="isSearchRequest" style="height: 600px">
        <el-table
          :data="request"
          height="100%"
          border
          stripe
          style="width: 100%"
          :default-sort="{ prop: 'date', order: 'descending' }"
        >
          <el-table-column prop="requestid" sortable label="需求编号" fit>
          </el-table-column>
          <el-table-column prop="name" sortable label="需求商品" fit>
          </el-table-column>
          <el-table-column prop="price" sortable label="期望价格" fit>
          </el-table-column>
          <el-table-column prop="num" sortable label="需求数量" fit>
          </el-table-column>
          <el-table-column prop="date" sortable label="发布时间" fit>
          </el-table-column>
          <el-table-column width="210">
            <template slot-scope="scope" class="btn">
              <el-button
                @click="watchRequest(scope.row)"
                type="text"
                size="medium"
                >查看详情</el-button
              >
              <el-button
                @click="editRequest(scope.row)"
                type="text"
                size="medium"
                >修改</el-button
              >
              <el-popconfirm
                title="请确认删除此发布"
                @confirm="deleteRequest(scope.row)"
              >
                <el-button
                  slot="reference"
                  type="text"
                  size="medium"
                  style="margin-left: 10px"
                  >删除</el-button
                >
              </el-popconfirm>
            </template></el-table-column
          >
        </el-table>
      </div>
    </div>
    <el-dialog title="修改发布" :visible.sync="editpublish">
      <el-form :model="publishForm">
        <el-form-item label="商品名字"
          ><el-input v-model="publishForm.name"></el-input
        ></el-form-item>
        <el-form-item>
          <el-upload
            accept="image/jpeg,image/jpg,image/png,image/svg"
            :limit="1"
            :action="''"
            :with-credentials="true"
            :http-request="upimgpublish"
          >
            <el-button size="small" type="primary"
              >点击修改图片</el-button
            ></el-upload
          >
        </el-form-item>
        <el-form-item label="商品分类"
          ><el-select
            v-model="publishForm.catalog"
            placeholder="请选择商品类别"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option></el-select
        ></el-form-item>
        <el-form-item label="商品价格"
          ><el-input v-model="publishForm.price"></el-input
        ></el-form-item>
        <el-form-item label="商品数量">
          <el-input-number v-model="publishForm.num" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="商品简介"
          ><el-input
            v-model="publishForm.introduction"
            type="textarea"
          ></el-input
        ></el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editpublish = false">取 消</el-button>
        <el-button type="primary" @click="confirmEditpublish"
          >确定修改</el-button
        >
      </div>
    </el-dialog>
    <el-dialog title="修改需求" :visible.sync="editrequest">
      <el-form :model="requestForm">
        <el-form-item label="需求商品"
          ><el-input v-model="requestForm.name"></el-input
        ></el-form-item>
        <el-form-item>
          <el-upload
            accept="image/jpeg,image/jpg,image/png,image/svg"
            :limit="1"
            :action="''"
            :with-credentials="true"
            :http-request="upimgrequest"
          >
            <el-button size="small" type="primary"
              >点击修改图片</el-button
            ></el-upload
          >
        </el-form-item>
        <el-form-item label="商品分类"
          ><el-select
            v-model="requestForm.catalog"
            placeholder="请选择商品类别"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option></el-select
        ></el-form-item>
        <el-form-item label="期望价格"
          ><el-input v-model="requestForm.price"></el-input
        ></el-form-item>
        <el-form-item label="需求数量">
          <el-input-number v-model="requestForm.num" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="需求描述"
          ><el-input
            v-model="requestForm.introduction"
            type="textarea"
          ></el-input
        ></el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editrequest = false">取 消</el-button>
        <el-button type="primary" @click="confirmEditrequest"
          >确定修改</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: "",
      editpublish: false,
      editrequest: false,
      isSearchGood: false,
      isSearchRequest: false,
      select: "商品",
      subselect: "1",
      options: [{ label: "商品" }, { label: "需求" }],
      catalog: [
        { label: "全部", value: "1" },
        { label: "教辅资料", value: "2" },
        { label: "生活用品", value: "3" },
        { label: "电子产品", value: "4" },
        { label: "网络资源", value: "5" },
        { label: "其他", value: "6" },
      ],
      order: [],
      request: [],
      publishForm: {
        goodid: "",
        userid: "",
        username: "",
        name: "",
        catalog: "",
        price: "",
        num: "",
        img: "",
        introduction: "",
      },
      requestForm: {
        requestid: "",
        userid: "",
        username: "",
        name: "",
        catalog: "",
        price: "",
        num: "",
        img: "",
        introduction: "",
      },
    };
  },
  methods: {
    logout() {
      this.$router.push("mainpage");
      this.$http.post("admin/logout");
      window.sessionStorage.clear();
      this.$store.commit("logout");
      this.$message("管理员退出!");
      this.reload;
    },
    search() {
      if (this.keyword === "") {
        this.$message("请输入要搜索的内容...");
        return;
      }
      if (this.select === "商品") {
        this.isSearchRequest = false;
        this.isSearchGood = true;
        this.$http
          .get(
            "searchGoodsByKeywords?keywords=" +
              this.keyword +
              "&" +
              "cat_id=" +
              this.subselect
          )
          .then((res) => {
            console.log(res.data);
            if (res.data.success === true) {
              ///>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
              var keymap = {
                gid: "goodid",
                uid: "userid",
                imgDir: "img",
                inventory: "num",
                goodsDesc: "introduction",
              };
              for (var i = 0; i < res.data.goods.length; i++) {
                var obj = res.data.goods[i];
                for (var key in obj) {
                  var newkey = keymap[key];
                  if (newkey) {
                    obj[newkey] = obj[key];
                    delete obj[key];
                  }
                }
              }
              this.order = res.data.goods;
            } else {
              this.$message.error("加载失败,请重新加载!");
            }
          });
      }
      if (this.select === "需求") {
        this.isSearchGood = false;
        this.isSearchRequest = true;
        this.$http
          .get(
            "getRequestByKeyWord?keyword=" +
              this.keyword +
              "&cat_id=" +
              this.subselect
          )
          .then((res) => {
            if (res.data.success === true) {
              ///>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
              var keymap = {
                prefPrice: "price",
                uid: "userid",
                reqDesc: "introduction",
                rid: "requestid",
                title: "name",
                offerTime: "date",
              };
              for (var i = 0; i < res.data.request.length; i++) {
                var obj = res.data.request[i];
                for (var key in obj) {
                  var newkey = keymap[key];
                  if (newkey) {
                    obj[newkey] = obj[key];
                    delete obj[key];
                  }
                }
              }
              this.request = res.data.request;
            } else {
              this.$message.error("加载失败,请重新加载!");
            }
          });
      }
    },
    watchPublish(good) {
      this.$store.commit("setGood", good);
      this.$router.push("goodinfo");
    },
    watchRequest(request) {
      this.$store.commit("setRequest", request);
      this.$router.push("requestinfo");
    },
    editRequest(row) {
      this.requestForm = {
        requestid: row.requestid,
        userid: row.userid,
        username: row.username,
        name: row.name,
        price: row.price,
        introduction: row.introduction,
      };
      console.log(this.requestForm);
      this.editrequest = true;
    },
    editPublish(row) {
      this.publishForm = {
        goodid: row.goodid,
        name: row.name,
        img: row.img,
        catalog: row.catalog,
        price: row.price,
        num: row.num,
        introduction: row.introduction,
      };
      this.editpublish = true;
    },
    deleteRequest(index) {
      this.$http.post("deleteRequest", { rid: index.requestid }).then((res) => {
        if (res.data.success === true) {
          this.$message.success(res.data.message);
          this.request.splice(
            this.request.findIndex((item) => item.requestid == index.requestid),
            1
          );
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    deletePublish(index) {
      //删除请求
      this.$http.post("deleteGoods", { gid: index.goodid }).then((res) => {
        if (res.data.success === true) {
          this.$message.success(res.data.message);
          this.order.splice(
            this.order.findIndex((item) => item.goodid == index.goodid),
            1
          );
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    confirmEditpublish() {
      var good = {
        gid: this.publishForm.goodid,
        name: this.publishForm.name,
        goodsDesc: this.publishForm.introduction,
        price: this.publishForm.price,
        inventory: this.publishForm.num,
        cat_id: this.publishForm.catalog,
        img_dir: this.publishForm.img,
      };
      this.$http.post("ModifyGoodsInformation", good).then((res) => {
        if (res.data.success === true) {
          this.$message.success("修改成功!");
          this.editpublish = false;
        } else {
          this.$message.error("修改失败,请稍后再试!");
        }
      });
      //上传修改信息
    },
    confirmEditrequest() {
      var request = {
        rid: this.editForm.requestid,
        title: this.editForm.name,
        cat_id: this.editForm.catalog,
        num: this.editForm.num,
        req_desc: this.editForm.introduction,
        pref_price: this.editForm.price,
        time_limit: "2",
        //>>>>>>>>>>>>>>>>>>>>>>>>>>>>
      };
      this.$http.post("editRequest", request).then((res) => {
        if (res.data.success === true) {
          this.editrequest = false;
          this.$message.success("修改成功!");
        } else {
          this.$message.error("修改失败,请稍后再试!");
        }
      });
    },
    upimgrequest(item) {
      const { file } = item;
      const formdata = new FormData();
      formdata.append("file", file);
      this.$http.post("upload/img/message", formdata).then((res) => {
        if (res.data.success === true) {
          this.$message.success("上传成功!");
          this.requestForm.img = "http://8.140.135.252:8080" + res.data.imgUrl;
        } else this.$message.error("上传失败,请稍后重新上传!");
      });
    },
    upimgpublish(item) {
      const { file } = item;
      const formdata = new FormData();
      formdata.append("file", file);
      this.$http.post("upload/img/message", formdata).then((res) => {
        if (res.data.success === true) {
          this.$message.success("上传成功!");
          this.publishForm.img = "http://8.140.135.252:8080" + res.data.imgUrl;
        } else this.$message.error("上传失败,请稍后重新上传!");
      });
    },
  },
};
</script>

<style lang="less" scoped>
.body {
  width: 100%;
  height: 100%;
}
.header {
  height: 120px;
  background-color: #e3e4e5;
  font-size: 35px;
  line-height: 120px;
  padding-left: 30px;
}
.search {
  height: 80px;
  width: 50%;
  line-height: 80px;
  text-align: center;
  margin: auto;
}

/deep/.el-table {
  margin-top: 120px;
}
/deep/.el-table {
  font-size: 19px;
}
/deep/.el-table .el-button {
  font-size: 19px;
}
/deep/.el-dialog__title {
  line-height: 30px;
  font-size: 30px;
}
/deep/.el-form-item__label {
  font-size: 20px;
}
/deep/.el-input__inner {
  font-size: 18px;
}
/deep/.el-textarea__inner {
  font-size: 18px;
}
.search {
  height: 80px;
  text-align: center;
  line-height: 80px;
}
/deep/.search .el-input__inner {
  font-size: 27px;
}
/deep/.search .el-button {
  font-size: 27px;
}
.s2 {
  /*s2是我的输入框class*/
  width: 400px; /*调整整个组件的宽度*/
}
/deep/.search .el-input {
  font-size: 20px;
}
/deep/.search .el-input__inner {
  /*或者 .s2>>>.el-input__inner  */
  height: 60px; /*调整inner的高度*/
  border-radius: 10px; /*输入框圆角值*/
}
li {
  font-size: 20px;
  margin: 5px 0;
}
.main {
  height: 500px;
}
/deep/.el-table {
  height: 800px;
}
</style>